import React, { Component, Fragment } from 'react'
import {Input} from 'antd'
import styles from './index.less'
import { connect } from 'dva'

@connect(({infoenterprise, infoaccount})=>({
    enterpriseInfo: infoenterprise.enterpriseInfo,
    accountInfo: infoaccount.accountInfo
}))
class OtherEdit extends Component {
    constructor(props){
        super(props)
        const { spsRateProfitResponses } = props.enterpriseInfo
        if(spsRateProfitResponses.length>0){
            const { 
                rateAirParcel, 
                rateDelivery, 
                rateLanshou, 
                ratePickGoods, 
                leavePort
            } = spsRateProfitResponses[0]
            this.state = {
                info: { ...spsRateProfitResponses[0] },
                rateAirParcel, 
                rateDelivery, 
                rateLanshou, 
                ratePickGoods, 
                leavePort, 
            }
        }else{
            this.state={
                info: {}
            }
        }
    }
    handleLanshouChange = (e)=>{
        this.setState({
            rateLanshou: e.target.value
        })
    }
    handleLanshouBlur = () => {
        if(this.state.rateLanshou === ''){
            this.lanshouInput.focus()
        }
        this._blur()
    }
    handleAirParcelChange = (e)=>{
        this.setState({
            rateAirParcel: e.target.value
        })
    }
    handleAirParcelBlur = () => {
        if(this.state.rateAirParcel === ''){
            this.airParcelInput.focus()
        }
        this._blur()
    }
    handleLeavePortChange = (e) => {
        this.setState({
            leavePort: e.target.value
        })
    }
    handleLeavePortBlur = () => {
        if(this.state.leavePort === ''){
            this.leavePortInput.focus()
        }
        this._blur()
    }
    handlePickGoodsChange = (e)=>{
        this.setState({
            ratePickGoods: e.target.value
        })
    }
    handlePickGoodsBlur = () => {
        if(this.state.ratePickGoods === ''){
            this.pickGoodsInput.focus()
        }
        this._blur()
    }
    handleDeliveryChange = (e)=>{
        this.setState({
            rateDelivery: e.target.value
        })
    }
    handleDeliveryBlur = ()=>{
        if(this.state.rateDelivery === ''){
            this.deliveryInput.focus()
        }
        this._blur()
    }
    _blur(){
        this.props.handleModify(
            {
                rateAirParcel: this.state.rateAirParcel, 
                rateDelivery: this.state.rateDelivery, 
                rateLanshou: this.state.rateLanshou, 
                ratePickGoods: this.state.ratePickGoods, 
                leavePort: this.state.leavePort
            }
        )
    }
    componentDidMount(){
        this._blur()
    }
    render() {
        console.log('othereidt component did mount')
        const {
            rateAirParcel, 
            rateDelivery, 
            rateLanshou, 
            ratePickGoods, 
            leavePort,
            profitWayLanshou,
            profitWayParcel,
            profitWayPickGoods,
            profitWayDelivery,
            profitRateLanshou,
            profitRateParcel,
            profitRatePickGoods,
            profitRateDelivery,
            profitDateLanshou,
            profitDateParcel,
            profitDatePickGoods,
            profitDateDelivery,
        } = this.state.info
        return (
            <div className={styles.otherBox}>
                <div>
                    <h3>运输服务税率</h3>
                    <div className={styles.transportBox}>
                        <div className={styles.innerBox}>
                            <div className={styles.item}>
                                <p className={styles.headers_edit}>服务类型</p>
                                <p>税率</p>
                            </div>
                            {
                                rateLanshou ?  
                                <div className={styles.item}>
                                    <p className={styles.headers_edit}>揽收</p>
                                    <p style={{display: 'flex',justifyContent: 'center'}}>
                                        <Input 
                                            value={this.state.rateLanshou}
                                            onChange={this.handleLanshouChange} 
                                            onBlur={this.handleLanshouBlur}
                                            size="small" 
                                            style={{width: '80px',textAlign:'center'}}
                                            ref={i => this.lanshouInput = i} 
                                        />&ensp;%
                                    </p>
                                </div> : null
                            }
                            {
                                rateAirParcel ? 
                                <div className={styles.item}>
                                    <p className={styles.headers_edit}>空运</p>
                                    <p style={{display: 'flex',justifyContent: 'center'}}>
                                        <Input 
                                            value={this.state.rateAirParcel}
                                            onChange={this.handleAirParcelChange}
                                            onBlur={this.handleAirParcelBlur}
                                            size="small" 
                                            style={{width: '80px',textAlign:'center'}}
                                            ref={i => this.airParcelInput = i}
                                        />&ensp;%
                                    </p>
                                </div> : null
                            }
                            {
                                leavePort ? 
                                <div className={styles.item}>  
                                    <p className={styles.headers_edit}>出港操作</p>
                                    <p style={{display: 'flex',justifyContent: 'center'}}>
                                        <Input 
                                            value={this.state.leavePort} 
                                            size="small" 
                                            onChange={this.handleLeavePortChange} 
                                            onBlur={this.handleLeavePortBlur}
                                            style={{width: '80px',textAlign:'center'}}
                                            ref={i => this.leavePortInput = i}
                                        />&ensp;%
                                    </p>
                                </div> : null
                            }                      
                            {
                                ratePickGoods ? (
                                <div className={styles.item}>                              
                                    <p className={styles.headers_edit}>提货</p>
                                    <p style={{display: 'flex',justifyContent: 'center'}}>
                                        <Input 
                                            value={this.state.ratePickGoods}
                                            onChange={this.handlePickGoodsChange} 
                                            onBlur={this.handlePickGoodsBlur}
                                            size="small" 
                                            style={{width: '80px',textAlign:'center'}}
                                            ref={i => this.pickGoodsInput = i}
                                        />&ensp;%
                                    </p>
                                </div>  
                                ) : null
                            }
                            {
                                rateDelivery ? (
                                <div className={styles.item}>
                                    <p className={styles.headers_edit}>派送</p>
                                    <p style={{display: 'flex',justifyContent: 'center'}}>
                                        <Input 
                                            value={this.state.rateDelivery} 
                                            onChange={this.handleDeliveryChange} 
                                            onBlur={this.handleDeliveryBlur}
                                            size="small" 
                                            style={{width: '80px',textAlign:'center'}}
                                            ref={i => this.deliveryInput = i}
                                        />&ensp;%
                                    </p>
                                </div>
                                ) : null
                            }                           
                        </div>
                    </div>
                </div>
                {   
                    // 1.专属供应商 2.自营店供应商 3.平台供应商
                  (this.props.accountInfo.attributeTag && this.props.accountInfo.attributeTag.includes("2")) ?        
                    <div style={{marginTop: '20px'}}>
                        <h3>自营店利润分成</h3>
                        <div className={styles.profitBox}>
                            <div className={styles.innerBox}>
                                <div className={styles.item}>
                                    <p className={styles.headers_edit}>服务类型</p>
                                    <p>利润分成方式</p>
                                    <p>利润分成税率</p>
                                    <p>利润分成日期</p>
                                </div>
                                <div className={styles.item}>
                                    <p className={styles.headers_edit}>揽收</p>
                                    <p>{profitWayLanshou}</p>
                                    <p>{profitRateLanshou}</p>
                                    <p>{profitDateLanshou}</p>
                                </div>
                                <div className={styles.item}>
                                    <p className={styles.headers_edit}>空运</p>
                                    <p>{profitWayPickGoods}</p>
                                    <p>{profitRateParcel}</p>           
                                    <p>{profitDateParcel}</p>
                                </div>
                                <div className={styles.item}>
                                    <p className={styles.headers_edit}>提货</p>
                                    <p>{profitWayPickGoods}</p>
                                    <p>{profitRatePickGoods}</p>
                                    <p>{profitDatePickGoods}</p>
                                </div>
                                <div className={styles.item}>
                                    <p className={styles.headers_edit}>派送</p>
                                    <p>{profitWayDelivery}</p>
                                    <p>{profitRateDelivery}</p>
                                    <p>{profitDateDelivery}</p>
                                </div>
                            </div>
                        </div>
                    </div> : null
                }
            </div>
        )
    }
}
export default OtherEdit